
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Yahoo! UI Library - Drag and Drop</title>
<link rel="stylesheet" type="text/css" href="./css/screen.css">
</head>


<body style="height:100%">
<img id="ylogo" src="img/logo.gif" />

<div id="pageTitle">
  <h3>Drag and Drop</h3>
</div>
<div id="content">
  <form name="dragDropForm" action="javscript:;">
    <div class="newsItem">
      <p>&nbsp;</p>
      <p>&nbsp;</p>

      <p><a href="drag.html?mode=dist">Drag test</a>:
	  All three squares can be dragged, and are drop targets</p>

      <p><a href="ontop.html?mode=dist">Always on top</a>: 
	  Same as the drag test, except the object being dragged is 
	  displayed on top of the others.</p>

      <p><a href="proxy.html?mode=dist">Proxy drag</a>: 
	  The actual element is not moved during a drag operation. 
	  Instead, an absolutely positioned div (created once for all instances) is resized to the dimensions 
	  of the linked element and moved to the location of the drag operation.
	  </p>

	<p><a href="list.html?mode=dist">Sortable list</a>: 
		When a list item is dragged past the center
		of another list item, it is inserted before that item.
		The items in the first two columns can interact with items in the other
		column.  The items in the third column are defined as a separate group,
		so they can only interact with other items in the third column.
	  </p>

	   <p><a href="multihandle.html?mode=dist">Multiple drag handles</a>:
       Shows how you can create multiple "hot spots" on your draggable item.
	  </p>

	  <p><a href="targetable.html?mode=dist">Targetable afforance</a>:
        Demonstrates how multiple interaction groups and the events exposed
        by the utility can be used to provide user feedback during the drag.
	  </p>

	  <p><a href="grid.html?mode=dist">Grid</a>:
       Demonstrates the graduated movement feature of drag and drop.
	  </p>

	  <p><a href="resize.html?mode=dist">Resize</a>:
       Demonstrates one approach to creating a draggable and resizable module.
	  </p>

	  <p><a href="circle.html?mode=dist">Custom Click Validator</a>:

      In this example, we override clickValidator to provide custom logic for
      determining if the initial mousedown should initiate a drag.  A drag is 
      initiated only if the mousedown happens inside of the circle.  
	  </p>

	  <p>&nbsp;</p>
    </div>
  </form>
</div>
      <div id="footerContainer">
        <div id="footer">
          <p>&nbsp;</p>
        </div>
      </div>
    </div>
  </div>
</div>

</body>
</html>
